<template>
    <div class="form">
        <el-form style="margin:20px;width:90%;min-width:600px;" label-width="100px" 
            :model="pager" :rules="pager_rules" ref='pager'>

            <el-form-item label="试卷名称" prop='name'>
                <el-input v-model="pager.name" placeholder='请输入试卷名称' :disabled="updateFlag"></el-input>
            </el-form-item>

            <el-form-item label="试卷内容" prop='block'>
                <el-button type="info" @click='addBlockDialoge = true'>添加区域</el-button>
                <el-row style="margin: 10px, 10px" v-for="(rowArray, index) in pager.block">
                    <el-col :span="6" v-for="(block, index) in rowArray" :offset="index> 0 ? 1 : 0">
                        <el-card>
                            <div slot="header" class="clearfix">
                            <span>{{ block.name }}</span>
                                <el-button style="float: right;" size="small" type="primary" @click="updateBlock(block)">修改</el-button>
                            </div>
                            <div v-for="(question, index) in block.questions" class="text item">
                                {{ question.label }}
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-form-item>
            <div style="margin:15px">
                <el-checkbox  v-model="pager.relation.has_relation">是否有前后关联</el-checkbox>
                <div v-if="pager.relation.has_relation">
                    <el-button  type="primary" @click="addRelation">新增关联</el-button>
                    
                        <el-row v-for="(relation,index) in pager.relation.relations" style="margin:8px;">
                           <el-col :span="6">
                            <el-select v-model="relation.next_id" placeholder="后置题目">
                                <el-option
                                v-for="item in selectQuestions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            </el-col>
                            <el-col :span="12" :offset="1">
                             <el-cascader style="width:100%;"
                                placeholder="前置选项"
                                :options="selectQuestions"
                                v-model="relation.pre_ids">
                            </el-cascader>
                            </el-col>
                            <el-col :span="4" :offset="1">
                             <el-button  type="primary" icon="delete" @click="deletRelation(index)">删除关联</el-button>
                             </el-col>
                        </el-row>
               </div>
            </div>


            <el-form-item label='备注' prop='remark'>
                <el-input type='textarea' v-model="pager.remark" placeholder='备注'></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click='savePager("pager")'>{{updateFlag ? '修改' : '添加'}}</el-button>
                <el-button type="default" @click='resetPager("pager")'>清空</el-button>
            </el-form-item>
        </el-form>

        <el-dialog :title="blockForm.title" v-model="addBlockDialoge">
            <el-form :model="blockForm" ref='blockForm' :rules="blockForm_rules" >

                <el-form-item label="题块名称" prop='name'>
                    <el-input v-model="blockForm.name" placeholder='请输入题块名称'></el-input>
                </el-form-item>

                <el-form-item label="选择题目" prop='questionIds' >
                    <el-transfer style="padding-top:100px;" @change="handleChange" v-model="blockForm.questionIds" :titles="blockForm.titles" :data="questions"></el-transfer>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click='saveBlock("blockForm")'>{{updateBlockInfo.flag ? '修改' : '添加'}}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>        
    </div>
</template>

<script>
    import EditJs from './Edit.js';
    module.exports=EditJs;
</script>

<style scoped>
    .edit-form { width:500px; }
</style>